<!DOCTYPE html>
<html>
  <head>
    <title>测试VUE的简单使用</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3" />
    <meta name="description" content="this is my page" />
    <meta name="content-type" content="text/html; charset=UTF-8" />
    
		<script src="/js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="/css/testVue.css"></link>

  </head>
  
  <body>
    <div id="app">
    	<h1>{{name}}</h1>
		<p>{{test}}</p>
	  	<p>{{ message }}</p>
	   	<p>{{detail()}}</p>
	   	<p>{{detail2()}}</p>
	   	<p>{{detail3()}}</p>
	</div>
	
	<div id="app2">
    	<h1>{{name}}</h1>
		<p>{{test}}</p>
	  	<p>{{ message }}</p>	 
	</div>
	
	<div id="app3">
    	<h1>{{name}}</h1>
		<p>{{test}}</p>
		<p>{{ message }}</p>	 
	</div>
	
	<div id="app4">
		<h1>{{name}}</h1>
		<p>{{test}}</p>
		<p>{{ message }}</p>
		
		<div v-html="htmlMessage"></div>
	</div>

	
	<script type="text/javascript">
		var app1 = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue.js!',
			 test:'test',
			 name:'wch'
		  },
		  methods:{
		  	detail:function(){
		  		return this.name = "-------这是一个测试";
		  	},
		  	detail2:function(){
		  		return this.name+"******又是一个测试";
		  	},
		  	detail3:function(){
		  		return this.test+"###测试";
		  	}
		  }
		}
		)
		var app2 = new Vue({
		  el: '#app2',
		  data: {
		    message: 'Hello Vue.js2!',
			 test:'test2',
			 name:'wch2'
		  }
		})		
		
		
		
		var data3 = {name:'wch',test:'test',message:'app3'};
		var app3 = new Vue({
			el:'#app3',
			data:data3
		})
		
		//1：引用的对象相同
		document.write(app3.name === data3.name);
		document.write("<br></br>");
		
		//设置属性会影响原始数据
		app3.name = "fzl";
		document.write(data3.name+"<br></br>");
		
		//设置原始数据也会影响属性
		data3.test = "lzf";
		document.write(app3.test+"<br></br>");
		
		
		
		//区分自定义属性和vue自己的属性>
		var data4 = {name:'wch4',test:'test4',message:'app4',htmlMessage:'<h1>WChengHe测试v-html</h1>'};
		var app4 = new Vue({
			el:'#app4',
			data:data4
		})
		document.write(app4.$data === data4);
		document.write("<br></br>");
		document.write(app4.$el === document.getElementById('app4'));
		
	</script>
  </body>
</html>
